<template>
	<scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower">
		<!-- 轮播图开始 -->
		<view class="album_swiper">
			<!-- swiper有三个属性 
			 1.自动轮播 autoplay
			 2.指示器（小圆点）indicator-dots 
			 3.衔接轮播 circular-->
			<swiper autoplay indicator-dots circular>
				<swiper-item v-for="item in banner" :key="item.id">
					<image :src="item.thumb" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图结束 -->

		<!-- 列表开始 -->
		<view class="album_list">
			<navigator class="album_item" 
			v-for="item in album" 
			:key="item.id" 
			:url="`/pages/album/album?id=${item.id}`">
				<view class="album_img">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="album_info">
					<view class="album_name">{{item.name}}</view>
					<view class="album_desc">{{item.desc}}</view>
					<view class="album_btn">
						<view class="album_attention">关注</view>
					</view>
				</view>
			</navigator>
		</view>
		<!-- 列表结束 -->
	</scroll-view>
</template>

<script>
	export default {
		created() { //创建这个组件，就将首页页面的标题修改掉
			// 修改页面标题
			uni.setNavigationBarTitle({
				title: "专辑"
			});
			this.getList();
		},
		data() {
			return {
				params: {
					limit: 30,
					order: "hot",
					skip: 0
				},
				// 轮播图数组
				banner: [],
				// 列表数组
				album: [],
				// 是否还有分页数据
				hasMore: true
			}
		},
		methods: {
			// 上拉加载数据
			handleToLower() {
				if (this.hasMore) {
					this.params.skip += this.params.limit;
					this.getList();
					console.log(this.album);
				} else {
					uni.showToast({
						title: "没有数据了",
						icon: "none"
					})
				}
			},
			// 获取接口数据
			getList() {
				this.request({
					url: '/v1/wallpaper/album',
					data: this.params
				}).then(result => {
					console.log(result);
					if (this.banner.length === 0) {
						this.banner = result.res.banner;
					}
					if (result.res.album.length === 0) {
						this.hasMore = false;
						return;
					}
					this.album = [...this.album, ...result.res.album];
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.album_scroll_view {
		// height:屏幕的高度(不同的手机高度不同，不能写死)-头部标题的高度  calc减号之间必须有空格
		// #ifdef H5
		height: calc( 100vh - 130px );
		// #endif
		
		// #ifndef H5
		height: calc( 100vh - 36px );
		// #endif
	}

	.album_swiper {
		swiper {
			height: 326.1rpx;

			image {
				height: 100%;
			}
		}
	}

	.album_list {
		padding: 10rpx;

		.album_item {
			padding: 10rpx 0;
			// 横向布局，用伸缩盒子
			display: flex;
			border-bottom: 1rpx solid #ccc;

			.album_img {
				// 左边图片占1份
				flex: 1;
				padding: 10rpx;

				image {
					height: 200rpx;
					width: 200rpx;
				}
			}

			.album_info {
				// 右边消息占两份
				flex: 2;
				padding: 0 10rpx;
				// 超出就截取，因为desc很可能会超出
				overflow: hidden;

				.album_name {
					font-size: 30rpx;
					color: #000;
					padding: 10rpx 0;
				}

				.album_desc {
					padding: 10rpx 0;
					font-size: 24rpx;

					text-overflow: ellipsis;
					overflow: hidden;
					// 设置不换行，如果里面的内容很多时，两份的容器会被撑开
					white-space: nowrap;
				}

				.album_btn {
					padding: 10rpx;
					// 设置为伸缩盒子
					display: flex;
					// 靠右显示
					justify-content: flex-end;

					.album_attention {
						color: $color;
						border: 1rpx solid $color;
						padding: 10rpx;
					}
				}
			}
		}
	}
</style>
